<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item><i class='el-icon-lx-warn'></i> 题目管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='handle-box'>
                <el-button
                    type='primary'
                    icon='el-icon-circle-plus'
                    class='handle-del mr10'
                    @click='addQuestion'
                >新增
                </el-button>
                <el-input v-model='query.title' prefix-icon='el-icon-search' clearable placeholder='请输入关键词'
                          class='handle-input mr10'></el-input>
                <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
            </div>
            <el-table
                :data='questionList'
                stripe
                style='width: 100%'>
                <el-table-column
                    prop='index'
                    label='序号'
                    align='center'
                    width='100'>
                    <template slot-scope='scope'>
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop='title'
                    label='题目'
                    align='center'
                    width='250'>
                </el-table-column>
                <el-table-column
                    prop='optiona'
                    label='选项A'
                    align='center'
                    width='150'>
                </el-table-column>
                <el-table-column
                    prop='optionb'
                    label='选项B'
                    align='center'
                    width='150'>
                </el-table-column>
                <el-table-column
                    prop='optionc'
                    label='选项C'
                    align='center'
                    width='150'>
                </el-table-column>
                <el-table-column
                    prop='optiond'
                    label='选项D'
                    align='center'
                    width='150'>
                </el-table-column>
                <el-table-column
                    prop='solution'
                    label='正确答案'
                    align='center'
                    width='100'>
                </el-table-column>
                <el-table-column
                    prop='createtime'
                    align='center'
                    label='创建时间'
                    width='180'>
                    <template slot-scope='scope' v-if='scope.row.createtime'>
                        {{ scope.row.createtime | dateFormat }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop='updatetime'
                    label='上次修改时间'
                    align='center'
                    width='180'>
                    <template slot-scope='scope' v-if='scope.row.updatetime'>
                        {{ scope.row.updatetime | dateFormat }}
                    </template>
                </el-table-column>

                <el-table-column label='操作' width='180' align='center'>
                    <template slot-scope='scope'>
                        <el-button
                            type='text'
                            size='mini'
                            icon='el-icon-edit'
                            @click='handleEdit(scope.$index, scope.row)'>编辑
                        </el-button>
                        <el-button
                            type='text'
                            size='mini'
                            class='red'
                            icon='el-icon-delete'
                            @click='handleDelete(scope.$index, scope.row)'>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class='pagination'>
                <el-pagination
                    background
                    layout='sizes, total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @size-change='handleSizeChange'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>

        <el-dialog title='编辑题目' :visible.sync='dialogTableVisible'>
            <el-form ref='form' :model='question' label-width='80px'>
                <el-form-item label='题目'>
                    <el-input v-model='question.title'></el-input>
                </el-form-item>
                <el-form-item label='选项A'>
                    <el-input v-model='question.optiona'></el-input>
                </el-form-item>
                <el-form-item label='选项B'>
                    <el-input v-model='question.optionb'></el-input>
                </el-form-item>
                <el-form-item label='选项C'>
                    <el-input v-model='question.optionc'></el-input>
                </el-form-item>
                <el-form-item label='选项D'>
                    <el-input v-model='question.optiond'></el-input>
                </el-form-item>
                <el-form-item label='正确答案'>
                    <el-radio-group v-model='question.solution'>
                        <el-radio :label='"A"'>选项A</el-radio>
                        <el-radio :label='"B"'>选项B</el-radio>
                        <el-radio :label='"C"'>选项C</el-radio>
                        <el-radio :label='"D"'>选项D</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogTableVisible = false'>取 消</el-button>
                <el-button type='primary' @click='submitQuestion'>确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            questionList: [],
            question: {
                id: null,
                title: '',
                optiona: '',
                optionb: '',
                optionc: '',
                optiond: '',
                solution: ''
            },

            dialogTableVisible: false,
            query: {
                pageIndex: 1,
                pageSize: 10,
                title: ''
            },
            pageTotal: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.$axios.get(this.GLOBAL.httpUrl + '/question/get', {
                params: this.query
            }).then(res => {
                this.pageTotal = res.data.data.totalCount;
                this.questionList = res.data.data.resultList;
            });
        },
        handleEdit(index, row) {
            this.question = row;
            this.dialogTableVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete(this.GLOBAL.httpUrl + '/question', {
                    params:{
                        id: row.id
                    }
                }).then(res => {
                    if (res.data.status == 200) {
                        this.getData();
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                    }else {
                        this.$message({
                            type: 'error',
                            message: res.data.message
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消删除'
                });
            });
        },
        // 分页导航
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        },
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        addQuestion() {
            this.question = {
                id: null,
                title: '',
                optiona: '',
                optionb: '',
                optionc: '',
                optiond: '',
                solution: ''
            };
            this.dialogTableVisible = true;
        },
        submitQuestion() {
            if (this.question.id) {
                this.$axios.put(this.GLOBAL.httpUrl + '/question', this.question)
                    .then(res => {
                        this.getData();
                        this.dialogTableVisible = false;
                    });
            } else {
                this.$axios.post(this.GLOBAL.httpUrl + '/question', this.question)
                    .then(res => {
                        this.getData();
                        this.dialogTableVisible = false;
                    });
            }
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.mr10 {
    margin-right: 10px;
}

.schart-box {
    display: inline-block;
    margin: 20px;
}

.schart {
    width: 600px;
    height: 400px;
}

.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}

.red {
    color: #ff0000;
}
</style>